import { Component, OnInit } from '@angular/core';
import { NavController, PickerController } from '@ionic/angular';
import { ConfigService } from 'src/app/service/config.service';
import { HttpService } from 'src/app/service/http.service';
import { PopwinService } from 'src/app/service/popwin.service';
import { ToolService } from 'src/app/service/tool.service';
import { UrlService } from 'src/app/service/url.service';

@Component({
  selector: 'app-fk',
  templateUrl: './fk.page.html',
  styleUrls: ['./fk.page.scss'],
})
export class FkPage implements OnInit {

  public fkContent="";
  public typeArr=[{"id":5,"name":"存款问题"},{"id":6,"name":"提款问题"},{"id":7,"name":"游戏问题"},{"id":8,"name":"优惠问题"},{"id":9,"name":"网站/APP登录"},{"id":10,"name":"修改资料"},{"id":11,"name":"流水问题"},{"id":4,"name":"其它"}];
  public fkType="选中反馈类型";
  public fkTypeV:number=0;
  public imgData="";
  public isImg:boolean=false;
  constructor(private navCtrl:NavController,private pickercontroller:PickerController,private popWin:PopwinService,private http:HttpService) { }  

  ngOnInit() {
      
  }

  onSubmit(){
     if(this.fkTypeV===0){
        this.popWin.toast("请选择反馈类型");
        return;
     }
     if(ToolService.isEmpty(this.fkContent)){
       this.popWin.toast("请输入反馈内容");
       return;
     }
     this.submitNet();
  }
  /**
   * 提交建议的数据
   */
  submitNet(){
   let that = this;   
   let obj = "{\"type\":\"" + this.fkTypeV + "\",\"content\":\"" + this.fkContent + "\",\"file\":\"" + encodeURIComponent(this.imgData) + "\"}";
   this.http.get(UrlService.OTHER_SUGGEST, { "callback": "JSONP_CALLBACK", "data": ToolService.aesEncode(obj) }).subscribe(res => {
     let data = res.json();
     ToolService.setEncrypt(data.encrypt);
     if (data.code == ConfigService.SUCCESS_CODE) {
       that.popWin.toast("提交意见反馈成功");
       that.navCtrl.navigateRoot("/tabs/my");
     } else if (data.code == ConfigService.FAIL_CODE) {
       that.popWin.toast(data.message);
     } else if (data.code == ConfigService.LOGIN_CODE) {
       that.navCtrl.navigateForward("/login");
     }
   }, error => {
     console.log("error", error);
   });
  }

  async  openPicker(numColumns = 1) {
    let that=this;
    let data=this.typeArr;
   let numOptions=data.length;
   let multiColumnOptions=[];
   let arr=[];
    for(let tempItem in data){
      arr.push(data[tempItem].name);
    }
    multiColumnOptions.push(arr);
    const picker = await this.pickercontroller.create({
      columns: this.getColumns(numColumns, numOptions, multiColumnOptions),
      buttons: [
        {
          text: '取消',
          role: 'cancel'
        },
        {
          text: '确认',
          handler: (value) => {
            that.fkType=value['col-0'].text;
            that.fkTypeV=data[value['col-0'].value].id;
          }
        }
      ]
    });
    await picker.present();
  }

  getColumns(numColumns, numOptions, columnOptions) {
    let columns = [];
    for (let i = 0; i < numColumns; i++) {
      columns.push({
        name: `col-${i}`,
        options: this.getColumnOptions(i, numOptions, columnOptions)
      });
    }
    return columns;
  }

  getColumnOptions(columnIndex, numOptions, columnOptions) {
    let options = [];
    for (let i = 0; i < numOptions; i++) {
      options.push({
        text: columnOptions[columnIndex][i % numOptions],
        value: i
      })
    }
    return options;
  }

  uploadImg(){
      let that=this;
      const file = (<HTMLInputElement>document.getElementById('upload-input')).files[0];
      let img = document.createElement('img');
      img.src = window.URL.createObjectURL(file);
      img.onload = function () {
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var MAX_WIDTH = 320;
        var MAX_HEIGHT = 500;
        var width = img.width;
        var height = img.height;
        if (width > height) {
            if (width > MAX_WIDTH) {
                height *= MAX_WIDTH / width;
                width = MAX_WIDTH;
            }
        } else {
            if (height > MAX_HEIGHT) {
                width *= MAX_HEIGHT / height;
                height = MAX_HEIGHT;
            }
        }
        canvas.width = width;
        canvas.height = height;
        ctx.drawImage(img, 0, 0, width, height);
        const targetContain=document.getElementById("showImg");
        targetContain.setAttribute("style","height:"+height+"px;display:block;");
        targetContain.style.cssText = "height:"+height+"px;display:block;";
        document.getElementById("imgCanvas").appendChild(canvas);
        let dataUrl=canvas.toDataURL("image/jpeg",0.5);  //转换位base64的图片
        that.imgData=dataUrl;
      //  let tempImg= escape(that.imgData);
      //  console.log(tempImg);
        that.isImg=true;
    };
  }

  onCloseImg(){
      const targetContain=document.getElementById("showImg");
      targetContain.setAttribute("style","display:none;");
      targetContain.style.cssText = "display:none;";
      document.getElementById("imgCanvas").innerHTML="";
      this.imgData="";
      this.isImg=false;
  }

  backClick() {
    this.navCtrl.navigateBack("tabs/my");
  }
}
